<template>
  <!-- 搜索结果页面 -->
  <div class="searchResult">
    <div class="top">
      <img @click="$router.back()" class="back" src="@/assets/img/icons/black/back.svg" />
      <div class="box">
        <img class="s" src="@/assets/img/icons/search.svg" />
        <input @input="input" v-model="value" type="text" placeholder="输入书名、作者名" />
        <img v-if="value" class="x" src="@/assets/img/icons/cls.svg" @click="value = ''" />
        <div v-if="!value" class="x"></div>
      </div>
      <div class="btn" @click="searchClick">搜索</div>
      <k-scroll class="scroll" v-if="value && imagineWords.length" topColor="#efefef" bottomColor="#efefef" topType="stretch" bottomType="stretch">
        <div class="imagine" :style="{ height: imagineWords.length ? 'auto' : '100%' }">
          <div class="item" v-for="(item, index) in imagineWords" :key="JSON.stringify(item) + index" @click="imagineWordsClick(item)">
            {{ item }}
          </div>
        </div>
      </k-scroll>
    </div>
    <k-scroll
      class="scroll"
      topColor="var(--main-background-color)"
      bottomColor="var(--main-background-color)"
      topType="stretch"
      bottomType="stretch"
    >
      <div class="content" :style="{ height: novelList.length ? 'auto' : '100%' }">
        <van-loading v-if="loading" size="0.3rem" vertical>加载中...</van-loading>
        <div v-if="!loading && !novelList.length" class="null">
          <span>内容过于高级，搜索失败！</span>
        </div>
        <!-- 第一种列表 -->
        <div class="item" v-for="item in novelList" :key="JSON.stringify(item)" @click="novelClick(item.noveltable)">
          <img v-lazy="item.img" />
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="introduce">{{ item.introduce }}</div>
            <div class="bottom">
              <div class="left">
                <span>{{ item.type }}</span>
                <span>|</span>
                <span>{{ item.author }}</span>
              </div>
              <!-- <div class="rate">{{ item.rate.toFixed(1) }}分</div> -->
              <div class="rate">暂无</div>
            </div>
          </div>
        </div>
        <!-- 第二种列表 -->
        <!-- <div class="item" v-for="item in novelList" :key="JSON.stringify(item)">
          <img v-lazy="item.img" />
          <div class="info">
            <div class="box">
              <div class="name">{{ item.name }}</div>
              <div class="rate">{{ item.rate.toFixed(1) }}分</div>
            </div>
            <div class="center">
              <span>{{ item.author }}</span>
              <span>|</span>
              <span>{{ item.type }}</span>
            </div>
            <div class="introduce">{{ item.introduce }}</div>
          </div>
        </div> -->
        <!-- 没有更多 -->
        <div v-if="novelList.length" class="nomore">
          <div class="line"></div>
          <span>没有更多了</span>
          <div class="line"></div>
        </div>
      </div>
    </k-scroll>
  </div>
</template>

<script>
export default {
  name: 'searchResult',
  //组件挂载完成
  mounted() {
    this.getNovelList() //搜索小说
  },
  //组件被激活
  activated() {
    if (this.$route.query.search != this.value) {
      this.value = this.$route.query.search
      this.getNovelList() //搜索小说
    }
  },
  data() {
    return {
      //搜索内容
      value: this.$route.query.search,
      //是否正在加载
      loading: true,
      //搜索结果数据列表
      novelList: [],
      //搜索猜想词汇
      imagineWords: [],
    }
  },
  methods: {
    //搜索内容提交
    submitSearchContext(value) {
      this.$network
        .main('searchContext', value)
        .then((data) => {
          console.log('搜索内容提交成功')
        })
        .catch((err) => {
          console.log('搜索内容提交失败:' + err)
        })
    },
    //小说被点击提交
    submitClickNovel(table) {
      this.$network
        .main('clickNovel', table)
        .then((data) => {
          console.log('小说点击记录成功')
        })
        .catch((err) => {
          console.log('小说点击记录失败:' + err)
        })
    },
    //输入框输入事件
    input() {
      this.value = this.value.replace(/\s|[\r\n]/g, '') //删除空格
      //请求联想词汇列表
      if (this.value) {
        this.imagineWords = []
        this.$network
          .main('getImagineWords', this.value)
          .then((data) => {
            for (let item of data) {
              this.imagineWords.push(item.name)
            }
          })
          .catch((err) => {
            this.$toast({
              type: 'fail',
              message: '网络出错！',
            })
          })
      }
    },
    //搜索联想词汇
    imagineWordsClick(value) {
      this.imagineWords = []
      this.value = value
      this.submitSearchContext(this.value)
      //修改路由参数
      this.$router.replace({ query: { search: this.value } }).then((data) => {
        this.getNovelList() //搜索小说
      })
    },
    //请求搜索小说结果
    getNovelList() {
      if (!this.value) {
        this.$dialog({
          message: '搜索内容不能为空！',
        })
        return
      }
      this.recordHistory(this.value)
      this.loading = true //显示loading
      this.novelList = [] //清空以前的搜索结果
      this.imagineWords = []

      this.$network
        .main('searchNovel', this.value)
        .then((data) => {
          this.loading = false //隐藏loading
          this.novelList = data
        })
        .catch((err) => {
          this.loading = false //隐藏loading
          this.$toast({
            position: 'bottom',
            message: err,
          })
        })
    },
    //记录历史搜索记录
    recordHistory(value) {
      //记录历史搜索记录
      if (localStorage.getItem('searchHistory')) {
        let a = JSON.parse(localStorage.getItem('searchHistory'))
        for (let i in a) {
          if (a[i] == value) {
            a.splice(i, 1)
            a.push(value)
            localStorage.setItem('searchHistory', JSON.stringify(a))
            break
          }
          if (i == a.length - 1) {
            a.push(value)
            if (a.length >= 7) {
              a.splice(0, a.length - 6)
            }
            localStorage.setItem('searchHistory', JSON.stringify(a))
          }
        }
      } else {
        let a = [value]
        localStorage.setItem('searchHistory', JSON.stringify(a))
      }
    },
    //搜索按钮被点击
    searchClick() {
      if (!this.value) {
        this.$dialog({
          message: '搜索内容不能为空！',
        })
        return
      }
      this.submitSearchContext(this.value)
      //修改路由参数
      this.$router.replace({ query: { search: this.value } }).then((data) => {
        this.getNovelList() //搜索小说
      })
    },
    //进入点击的小说
    novelClick(table) {
      //进入小说阅读页面
      this.$router.push({
        path: '/read',
        query: {
          table,
        },
      })
      this.submitClickNovel(table)
    },
  },
}
</script>

<style lang="less" scoped src="./index.less"></style>
